<template>
	<view class="cash">
		<view class="H10"></view>
		<view class="H10"></view>
		<view class="money"><view class="ktx">可提现金额：{{balance}}元</view></view>
		<view class="jine">
			<view class="jine_01">¥</view>
			<view class="jine_02"><input type="number" v-model="amount"  class="uni-input" placeholder="请输入金额" /></view>
		</view>
		<!-- 是否自取 -->
		<view class="cashType">
			<view class="title">银行提现</view>
			<!-- <switch :checked="cashType==2 ? true:false" color="#ff976a"  @change="changeCashType"/> -->
			 <radio-group class="cashType-radio" @change="changeCashType">
				<label class="uni-list-cell uni-list-cell-pd">
					<view>
						<radio value="1" checked="true" color="#ff976a"/>
					</view>
					<view>微信提现</view>
				</label>
				<label class="uni-list-cell uni-list-cell-pd">
					<view>
						<radio value="2" color="#ff976a"/>
					</view>
					<view>银行提现</view>
				</label>
			</radio-group>
		</view>
		<view class="khh" v-if="cashType == 2">
			银行名称 &emsp;
			<input type="text" v-model="bank" disabled="true" @click="showBank" placeholder="请选择开户行"/>
			<lb-picker ref="picker" :list="bank_list" v-model="bank" @confirm="chooseBank"></lb-picker>
		</view>
		<view class="khh" v-if="cashType == 2">
			开户人姓名 &emsp;
			<input type="text" v-model="user" placeholder="请输入开户人姓名" />
		</view>
		<view class="khh" v-if="cashType == 2">
			银行卡号 &emsp;
			<input type="number" v-model="bankno" placeholder="请输入银行卡号"/>
		</view>
		<view class="txfy" v-if="cashType == 2">
			<view class="txfy_01">
				<view class="txfy_01_l">提现费用:</view>
				<view class="txfy_01_r">{{fee}}元</view>
			</view>
			<view class="txfy_01">
				<view class="txfy_01_l">实际到账:</view>
				<view class="txfy_01_r">{{money}}元</view>
			</view>
			<view class="txfy_02">
				<view class="txfy_02_l">预计到账时间</view>
				<view class="txfy_02_r">当日到账</view>
			</view>
		</view>
		<view @tap="submit" class="btn">提现</view>
		<uni-popup ref="popup" type="bottom" class="uni-popup-container">
			<view class="cancel-confirm-button">
				<span class="cancel-btn" @click="cancelChooseBank">取消</span>
				<span class="confirm-btn" @click="confirmBank">确定</span>
			</view>
			<picker-view v-if=" visible" :value="value" @change="showBank" :indicator-style="indicatorStyle">
				<picker-view-column>
					<view class="item" v-for="(item,index) in bank_list" :key="index">{{item.dictLabel}}</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import LbPicker from '@/components/lb-picker';
export default {
	data() {
		return {
			checked: true,
			amount:null, //提现金额
			bank: '',
			user:'',
			bankno:'',
			bank_list:[],
			show:false,
			balance:0,
			cashType:1,
			money:0,
			fee:0
			
		};
	},
	components: {
		LbPicker
	},
	onLoad(){
		uni.showLoading({
			mask:true
		})
		//获取银行列表
		this.bankList().then(res=>{
			uni.hideLoading();
			console.log('res',res)
			if(res.code == 0){
				if(res.data&&res.data.length !=0){
					res.data.forEach((item)=>{
						this.bank_list.push(item.dictValue);
					})
				}	
			}
		}).catch(err=>{
			uni.hideLoading();
			cosnole.log('err',err);
			uni.showToast({
				title:err.msg,
				icon:'none',
				duration:1500
			})
		})
		//获取余额
		this.rewardSummary().then(res=>{
			console.log('rs',res)
			if(res.code == 0){
				this.balance = res.data.rewardSumMoney - res.data.cashSumMoney;
				this.balance = this.balance.toFixed(2);
			}
		}).catch(err=>{
			console.log('err',err)
		})
	},

	methods: {
		...mapActions(['cashSave','bankList','rewardSummary']),
		changeCashType(event){
			this.cashType = event.detail.value;
			if(this.cashType == 1){
				this.fee = 0;
				this.money = this.amount;
			}else{
				this.fee = (this.amount * 0.006).toFixed(2);
				this.money = this.amount - this.fee;
				this.money = this.money.toFixed(2);
			}
		},
		showBank(){
				this.$refs.picker.show() // 显示
		},
		submit() {	
			console.log('this',this.balance)
			if(this.balance == 0.00 || this.balance == 0){
				uni.showToast({
					title:'当前账户余额为0不可提现！',
					icon:'none',
					duration:1500
				});
				return;
			}
			if(!this.amount || this.amount == 0){
				uni.showToast({
					title:'请输入提现金额',
					icon:'none',
					duration:1500
				})
				return;
			}
			
			if(this.amount - this.balance > 0){
				uni.showToast({
					title:'提现金额不可大于余额',
					icon:'none',
					duration:1500
				})
				return;
			}
			if(this.cashType == 2){
				if (this.amount == 0 && !this.amount) {
					uni.showToast({ title: '请填写提现金额', icon: 'none' });
					return false;
				}
				if (!this.bank) {
					uni.showToast({ title: '银行名字不能为空', icon: 'none' });
					return false;
				}
				if (!this.user) {
					uni.showToast({ title: '银行户名不能为空', icon: 'none' });
					return false;
				}
				if (!this.bankno) {
					uni.showToast({ title: '银行卡号不能为空', icon: 'none' });
					return false;
				}
			}
			
		 let payload = {
			 id:'',
			 cashType:this.cashType,
			 money:this.money,
			 bank:this.bank,
			 bankno:this.bankno,
			 user:this.user,
			 fee:this.fee,
			 amount:this.amount
		 }	
		 uni.showLoading({
		 	mask:true
		 })
		 this.cashSave(payload).then(res => {
			 uni.hideLoading();
				if(res.code == 0){
					uni.showToast({
						title:'提现成功',
						icon:'success',
						duration:1500,
						success() {
							setTimeout(()=>{
								uni.navigateBack();
							},1500)
						}
					})
				}else{
				uni.showToast({
					title:res.msg,
					icon:'none',
					duration:1500
				})	
				}
			}).catch(err=>{
				uni.hideLoading();
				uni.showToast({
					title:err.msg,
					icon:'none',
					duration:1500
				})
			})
		}
	},
	watch:{
		amount:{
			handler(newVal,oldVal){
				if(this.cashType == 2){
					this.fee = (this.amount * 0.006).toFixed(2);
					this.money = this.amount - this.fee;
					this.money = this.money.toFixed(2);
				}else{
					this.fee = 0;
					this.money = this.amount;
				}			
			}
		}
	}
};
</script>

<style lang="less">
.cash {
	.uni-input {
		background-color: #ffffff;
		margin-top: 5px;
	}
	background-color: #f5f5f5;
	height: 100vh;
	font-size: 14px;
	.cashType{
			background:#FFF;
			padding:30rpx;
			margin-bottom:30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 14px;
			}
			.cashType-radio{
				width:calc(100% - 150rpx);
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				font-size:14px;
				label{
					width:40%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					
				}
			}
		}
	.txz {
		padding: 15px 10px;
		background-color: #fff;
	}

	.money {
		background-color: #fff;
		padding: 10px;
	}

	.ktx {
		font-size: 14px;
		color: #949398;
	}

	.jine {
		display: flex;
		background-color: #fff;
		padding: 9px 10px;
		border-bottom: 1px solid #f8f8f8;
		border-top: 1px solid #f8f8f8;
		font-size:14px;
	}

	.jine_01 {
		padding: 7px 10px 0 0;
		font-size:14px;
	}
	.jine_02 .uni-input{
		font-size:14px;
	}

	.kg {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 9px 0px 7px 10px;
	}

	.kg_l {
		padding-top: 8px;
	}

	.khh {
		background-color: #fff;
		border-top: 1px solid #f8f8f8;
		padding: 17px 15px 12px;
	}

	.txfy {
		background-color: #fff;
		padding: 5px 10px;
		font-size: 14px;
	}

	.txfy_01 {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f8f8f8;
		padding: 10px 0 5px;
	}

	.txfy_02 {
		display: flex;
		justify-content: space-between;
		color: #b8b8bc;
		padding-bottom: 10px;
	}

	.btn {
		margin: 20px 10px 10px;
		background-color: #ff976a;
		height: 43px;
		line-height: 43px;
		text-align: center;
		border-radius: 20px;
		color: #fff;
	}
}
</style>
